/*
 * @Date: 2023-08-03 09:43:40
 * @LastEditors: zhangsongwei
 * @LastEditTime: 2023-08-06 02:47:26
 * @FilePath: /z/src/pages/dashbord/user.tsx
 * @description:
 */
import React, { useEffect, useState } from "react";

import {
  Table,
  Tabs,
  Input,
  Select,
  Row,
  Col,
  Button,
  Divider,
  Modal,
} from "antd";

import { getUserList, addUser, getRandomPassword } from "../../urls/p";

import { TableItemProps } from "./type";

const { confirm } = Modal;

// import './index.les
const { TabPane } = Tabs;

const { Option } = Select;

export default ({ onClick }: TableItemProps) => {
  const [dataList, setDataList] = useState<any[]>([]);
  const [showData, setShowData] = useState<any[]>([]);

  const [addInfo, setAddInfo] = useState<any>({});

  useEffect(() => {
    requestData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const columns: any[] = [
    // {
    // 	title: 'userId',
    // 	dataIndex: 'userId',
    // 	key: 'userId',
    // },
    {
      title: "username",
      dataIndex: "username",
      key: "username",
    },
  ];

  const classInfoView = () => {
    return (
      <div>
        <Row>
          <Col>username:</Col>
          <Col>
            <Input
              onChange={(e) => {
                e.persist();
                setAddInfo((d: any) => {
                  // TODO DEL
                  console.log("zz=del=info======>", e.target.value);
                  d.username = e.target.value;
                  return d;
                });
              }}
            />
          </Col>
        </Row>
      </div>
    );
  };

  const showConfirm = async () => {
    const res = await getRandomPassword();

    // TODO DEL
    console.log("zz=del=info======>", res);

    const { info } = res;
    if (info) {
      setAddInfo((d: any) => {
        d.password = info;
        // TODO DEL
        console.log("zz=del=info======>", d);
        return d;
      });
    }

    confirm({
      title: "add class",
      content: classInfoView(),
      onOk: async () => {
        const { username } = addInfo;

        if (!username) {
        } else {
          const res = await addUser(addInfo);
          const { code } = res;
          if (code == 200) {
            requestData();
          }
        }
      },
      onCancel() {
        setAddInfo({});
      },
    });
  };

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const requestData = async () => {
    const res = await getUserList();
    const res1 = JSON.parse(JSON.stringify(res));
    setDataList(res.info || []);
    setShowData(res1.info.slice(0, 10) || []);
  };

  const onChange = (pagination: any) => {
    const { current } = pagination;
    const dataList1 = JSON.parse(JSON.stringify(dataList));
    setShowData(dataList1.slice((current - 1) * 10, current * 10));
  };

  return (
    <div className="main-view">
      <Row gutter={[0, 40]}>
        <Col span={2} style={{}}>
          <Button onClick={showConfirm}>+</Button>
        </Col>
      </Row>
      <Row>
        <Col>
          <Table
            columns={columns}
            dataSource={showData}
            pagination={{ total: dataList.length, pageSize: 10 }}
            onChange={onChange}
            onRowClick={(record) => {
              if (record.edit) return;
              onClick && onClick(record);
            }}
          />
        </Col>
      </Row>
    </div>
  );
};
